<template>
  <el-card class="hobbyList_card">
    <div>
      <el-row :gutter="20">
        <el-col
            :span="2"
            class="text"
        >
          <div class="hobbyList_name">兴趣技能:</div>
        </el-col>
        <el-col
            :span="22"
            class="text_comtents"
        >
          <div>中国舞</div>
          <div>古典舞</div>
          <div>原创编舞</div>
          <div>爵士舞</div>
          <div>流行热舞</div>
          <div>成人舞蹈</div>
          <div>少儿舞蹈</div>
          <div>街舞</div>
          <div>民族舞</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col
            :span="2"
            class="text"
        >
          <div>兴趣技能:</div>
        </el-col>
        <el-col
            :span="22"
            class="text_comtents"
        >
          <div>中国舞</div>
          <div>古典舞</div>
          <div>原创编舞</div>
          <div>爵士舞</div>
          <div>流行热舞</div>
          <div>成人舞蹈</div>
          <div>少儿舞蹈</div>
          <div>街舞</div>
          <div>民族舞</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
          <div>热门舞蹈</div>
        </el-col>
      </el-row>
    </div>
    <p class="show">
                <span style="cursor: pointer;">
                    展示全部
                </span>
    </p>
  </el-card>
  <el-card >
    <div class="works">
      <div class="active">综合排序</div>
      <div>销量</div>
      <div>浏览量</div>
      <el-dropdown >
                       <span class="el-dropdown-link">价格<el-icon class="el-icon--right">
                         <arrow-down/></el-icon>
                          </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">由高到低</el-dropdown-item>
            <el-dropdown-item command="b">由低到高</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div>发布时间</div>
    </div>
  </el-card>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "LiveClass",
});
</script>

<script setup lang="ts">

</script>

<style scoped>
/*兴趣列表*/
.hobbyList_card {
  margin-top: 25px;
  padding: 16px 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.text {
  display: flex;
  flex-wrap: wrap;
  color: #b1b5c1;
}

.text_comtents {
  width: 100px;
  margin-bottom: 20px;
  color: #7D8090;
  display: flex;
  flex-wrap: wrap;
}

.text_comtents div {
  width: 100px;
  margin-bottom: 20px;
  cursor: pointer;
}

.show {
  text-align: center;
  color: red;
  font-size: 14px;
  margin: 0 auto;
}
/*综合排序*/
.works {
  display: flex;
  font-size: 14px;
  color: #7D8090;
}

.works div {
  margin-left: 25px;
  margin-right: 30px;
}

.works div:hover {
  color: #f93684;
  /*变成小手*/
  cursor: pointer;
}

.works img {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
</style>
